<template>
	<view class="page" style="padding-top: 104rpx;">
		<view class="header">
			<image @click="backpage" class="back" src="../../static/tian/back.png" mode=""></image>
			<view class="text">{{$t('first.title10')}}</view>
			<view class="fright">
				<img v-if="$i18n.locale == 'ft'" src="../../static/img/zh.png" alt="" @click="open2">
				<img v-if="$i18n.locale == 'en'" src="../../static/img/en.png" alt="" @click="open2">
				<img v-if="$i18n.locale == 'jp'" src="../../static/img/rb.png" alt="" @click="open2">
				<img v-if="$i18n.locale == 'ko'" src="../../static/img/hg.png" alt="" @click="open2">
			</view>
		</view>
		<view class="mask2" v-if="show2">
			<view @click="lang('en')">
				<img src="../../static/img/en.png" alt="">
				<text>English</text>
			</view>
			<view @click="lang('ft')">
				<img src="../../static/img/zh.png" alt="">
				<text>港澳繁體</text>
			</view>
			<view @click="lang('jp')">
				<img src="../../static/img/rb.png" alt="">
				<text>にほんご</text>
			</view>
			<view @click="lang('ko')">
				<img src="../../static/img/hg.png" alt="">
				<text>한국어</text>
			</view>
		</view>
		<view class="con">
			<!-- <view class="label">{{$t('first.title3')}}</view>
			<input type="text" v-model="mobile" :placeholder="$t('first.title4')">
			<view class="label">{{$t('first.title11')}}</view>
			<textarea v-model="key" :placeholder="$t('first.title12')"></textarea> -->
			<view class="label">{{$t('first.title13')}}</view>
			<input type="text" v-model="password"  :placeholder="$t('first.title14')">
			<input type="text" v-model="passwords"  :placeholder="$t('first.title148')">
			<view class="btn" :class="anshow ? 'a':''" @click="submit">{{$t('first.title15')}}</view>
		</view>
	</view>
</template>

<script>
	import {domain} from '../../config/domain.js'
	export default{
		data(){
			return{
				mobile:'',
				key:'',
				password:'',
				passwords:'',
				anshow:false,
				show2:false
			}
		},
		methods:{
			open2() {
				this.show2 = !this.show2
			},
			lang(e){
				this.$i18n.locale = e;
				localStorage.setItem('lang',e);
				this.show2 = false;
			},
			submit(){
				let that = this;
				that.anshow = true
				setTimeout(function(){
					that.anshow = false
				},300)
				var url=domain + 'api/new_forgetPwd';
				var mytype='POST';
					
					// if (!this.mobile) {	
					// 	uni.showToast({
					// 		icon:'none',
					// 		title:this.$t('first.title4')
					// 		// duration:10000
					// 	}); 
					// 	return false;
					// }
					if (!this.password) {
						uni.showToast({
							icon:'none',
							title:this.$t('first.title18')
							// duration:10000
						}); 
						return false;
					}
					if (this.password != this.passwords) {
						uni.showToast({
							icon:'none',
							title:this.$t('first.title149')
							// duration:10000
						}); 
						return false;
					}
					// if (!this.key) {
					// 	uni.showToast({
					// 		icon:'none',
					// 		title:this.$t('first.title12')
					// 		// duration:10000
					// 	}); 
					// 	return false;
					// }
					var data={
						mobile:this.mobile,
						password:this.password,
						key:this.key
					
					};
					var userinfo = uni.getStorageSync('userinfo');
					// uni.showLoading({
					// 	title: '加载中',
					// 	mask: true
					// });
					uni.request({
						url,
						method: mytype,
						data,
						header: {
							'content-type': 'application/x-www-form-urlencoded' ,//自定义请求头信息
							'Lang':uni.getStorageSync('lang'),
							'AUTHORIZATION':userinfo.token,
						},
						success: res => {
							uni.showToast({
								icon:'none',
								title:res.data.msg 
								// duration:10000
							}); 
							uni.navigateTo({
								url: '/pages/index/index'
							})
						},
						fail: (err) => {
							console.log(err)
						},
						complete: () => {
							setTimeout(function() {
								uni.hideLoading();
							}, 1000);
						}
					});
				},
				backpage(){
					uni.navigateBack()
				}
			}
	}
</script>

<style scoped>
	*{
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	.page{
		width: 100%;
		height: 100%;
		min-height: 100vh;
		background-color: #ecf0f5;
	}
	.header{
		width: 100%;
		height: 104rpx;
		padding: 20rpx;
		position: fixed;
		background-color: #ecf0f5;
		display: flex;
		top: 0;
		left: 0;
		align-items: center;
		justify-content: space-between;
		z-index: 999;
	}
	.back{
		width: 48rpx;
		height: 48rpx;
	}
	.header .text{
		font-size: 36rpx;
		font-family: PingFangSC-Medium,PingFang SC;
		font-weight: 600;
		color: #222;
	}
	.con{
		width: 100%;
		height: 100%;
		padding: 40rpx;
		box-sizing: border-box;
	}
	.label{
		font-size: 28rpx;
		font-family: PingFangSC-Semibold,PingFang SC;
		font-weight: 600;
		color: #8287a2;
		margin-bottom: 20rpx;
	}
	input{
		width: 100%;
		height: 92rpx;
		border-radius: 12rpx;
		border: 2rpx solid transparent;
		box-sizing: border-box;
		padding: 20rpx 32rpx;
		margin-bottom: 50rpx;
		background-color: #fff;
		color: #323233;
		font-size: 28rpx;
	}
	textarea{
		width: 100%;
		height: 192rpx;
		border-radius: 12rpx;
		border: 2rpx solid transparent;
		font-size: 32rpx;
		padding: 20rpx;
		box-sizing: border-box;
		background-color: #fff;
		color: #323233;
		margin-bottom: 50rpx;
	}
	.btn{
		width: 100%;
		height: 96rpx;
		background: #ffb105;
		border-radius: 50rpx;
		font-size: 40rpx;
		font-family: PingFangSC-Semibold,PingFang SC;
		font-weight: 600;
		color: #000;
		text-align: center;
		line-height: 96rpx;
		margin-top: 140rpx;
		cursor: pointer;
		user-select: none;
	}
	.btn.a{
		animation:transform .3s ease;
	}
	@keyframes transform {
		0%{
			transform:scale(1)
		}
		50%{
			transform:scale(0.8)
		}
		100%{
			transform:scale(1)
		}
	}
	
	.fright img {
		width: 44rpx;
		height: 44rpx;
	}
	.mask2 {
		position: fixed;
		top: 105rpx;
		right: 14rpx;
		z-index: 99;
		background-color: #ffffff;
		border-radius: 50rpx;
		padding: 10rpx 30rpx;
		font-size: 24rpx;
	}
	
	.mask2 img {
		width: 44rpx;
		height: 44rpx;
		margin-right: 30rpx;
	}
	
	
	.mask2 view {
		display: flex;
		align-items: center;
		margin: 20rpx;
	}
</style>